import React, { Component, Fragment } from 'react'
// import 'antd/dist/antd.css'
// import { Input, Button, Layout, List } from 'antd'
import store from './store'
import { changeInputAction, addItemAction, deleteItemAction, getMyListAction } from './store/actionCreators'
import TodoListUI from './TodoListUI'
// const { Header, Content, Footer, Sider } = Layout

export default class TodoList extends Component {
  constructor(props) {
    super(props)
    this.changeInputValue = this.changeInputValue.bind(this)
    this.storeChange = this.storeChange.bind(this)
    this.clickBtn = this.clickBtn.bind(this)
    this.deleteItem = this.deleteItem.bind(this)
    this.state = store.getState()
    store.subscribe(this.storeChange)
  }
  changeInputValue(e) {
    const action = changeInputAction(e.target.value)
    store.dispatch(action)
  }

  storeChange() {
    this.setState(store.getState())
  }

  clickBtn() {
    const action = addItemAction()
    store.dispatch(action)
  }
  deleteItem(index) {
    const action = deleteItemAction(index)
    store.dispatch(action)
  }

  componentDidMount() {
    // axios.get('https://www.easy-mock.com/mock/5f8fd789bcca63581f44c444/redux/getList').then(res => {
    //   const data = res.data.data.list
    //   const action = getListAction(data)
    //   store.dispatch(action)
    // })

    /**
     * thunk
     */
    // const action = getToDoList()
    // store.dispatch(action)

    /**
     * saga
     */
    const action = getMyListAction()
    store.dispatch(action)
  }

  render() {
    return (
      <Fragment>
        <TodoListUI
          inputValue={this.state.inputValue}
          list={this.state.list}
          changeInputValue={this.changeInputValue}
          clickBtn={this.clickBtn}
          deleteItem={this.deleteItem}
        />
        {/* <Layout>
          <Sider>Sider</Sider>
          <Layout>
            <Header>Header</Header>
            <Content>
              <div style={{ margin: '10px', width: '300px' }}>
                <List
                  bordered
                  dataSource={this.state.list}
                  renderItem={(item, index) => <List.Item onClick={this.deleteItem.bind(this, index)}>{item}</List.Item>}
                />
              </div>
            </Content>
            <Footer>Footer</Footer>
          </Layout>
        </Layout>
        <Input
          placeholder={this.state.inputValue}
          style={{ width: '250px', marginRight: '10px' }}
          onChange={this.changeInputValue}
          value={this.state.inputValue}
        />
        <Button type="primary" onClick={this.clickBtn}>
          增加
        </Button> */}
      </Fragment>
    )
  }
}
